<template>
  <el-dialog
    title="选择工艺路线"
    :visible="selectProcessDialog"
    width="70%"
    class="Process-select"
    @close="selectProcessClose"
  >
    <div class="app-container Process-box">
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <el-form
            :inline="true"
            class="ma-search"
            label-width="68px"
            style="margin-bottom: 8px"
          >
            <div class="ma-left">
              <el-form-item label="工艺编码">
                <el-input
                  v-model="queryParams.processCode"
                  clearable
                  size="small"
                  style="width: 240px"
                />
              </el-form-item>
              <el-form-item label="工艺名称">
                <el-input
                  v-model="queryParams.name"
                  clearable
                  size="small"
                  style="width: 240px"
                />
              </el-form-item>
              <el-form-item label="单据日期" prop="status">
                <el-date-picker
                  v-model="valueDate"
                  type="daterange"
                  align="right"
                  unlink-panels
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions"
                  style="width: 250px"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="search"
                  size="mini"
                  >搜索</el-button
                >
              </el-form-item>
            </div>
            <div class="ma-right">
              <el-button
                type="primary"
                plain
                icon="el-icon-menu"
                size="mini"
                @click="checkleAll"
                >查询所有</el-button
              >
            </div>
          </el-form>
          <!-- 工艺路线数据 -->
          <el-table
            :data="processData"
            border
            v-loading="loading"
            :height="maxHeight"
            @row-dblclick="handleProcessSelect"
          >
            <el-table-column
              type="index"
              width="60"
              align="center"
              label="序号"
            >
            </el-table-column>
            <el-table-column
              prop="processCode"
              label="工艺编码"
              align="center"
              width="180"
            >
              <template v-slot="scope">
                <span>{{ scope.row.processCode }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="工艺名称" align="center">
            </el-table-column>
            <el-table-column
              prop="invoiceDate"
              label="单据日期"
              align="center"
              width="150"
            >
              <template v-slot="scope">
                <span>{{ inMaterTime(scope.row.invoiceDate) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="orderId"
              label="排序"
              align="center"
              width="150"
            >
            </el-table-column>

            <el-table-column
              prop="remarks"
              label="备注"
              width="270"
              align="center"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding"
              width="80"
            >
              <template slot-scope="scope">
                <div class="public-btn">
                  <el-button
                    size="mini"
                    type="text"
                    @click.stop="handleProcessSelect(scope.row)"
                    >选择
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页信息 -->
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getProcessList"
          />
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<script>
import { listProcess } from "../../api/order";
let self;
export default {
  name: "Process",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        processCode: "",
        name: "",
        invoiceStatus: "1",
        startDate: "",
        endDate: "",
      },
      // 开始时间/结束时间配置
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date(
                new Date(new Date().toLocaleDateString()).getTime()
              );
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date(
                new Date(new Date().toLocaleDateString()).getTime()
              );
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date(
                new Date(new Date().toLocaleDateString()).getTime()
              );
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      valueDate: "",
      // 总条数
      total: 0,
      // 最大高度
      maxHeight: null,
      //工艺路线数据
      processData: [],
      // 是否显示弹出层
      open: false,
      // 弹出层标题
      title: "",

      //弹框提交按钮状态，1（新增） 2（修改）
      butChange: "",
    };
  },
  props: {
    selectProcessDialog: {
      type: Boolean,
      default: true,
    },
    workType: {
      type: String,
      default: "",
    },
    optionsworkType: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  beforeCreate() {
    self = this;
  },
  created() {
    this.getProcessList();
  },
  methods: {
    // 获取工艺路线数据
    getProcessList() {
      this.loading = true;
      this.queryParams.workType = this.workType;
      listProcess(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.loading = false;
          this.processData = res.rows;
          if (this.processData.length > 0) {
            this.processData.forEach((item) => {
              this.optionsworkType.forEach((obj) => {
                if (item.workType == obj.dictValue) {
                  item.workTypeName = obj.dictLabel;
                }
              });
            });
          }
          this.total = res.total;
          this.maxHeight = `${document.documentElement.clientHeight}` - 380;
        }
      });
    },

    // 弹框状态
    selectProcessClose() {
      this.$emit("selectProcessClose");
    },

    // 选择工艺路线
    handleProcessSelect(row) {
      this.$emit("handleProcessSelect", row);
    },

    //搜索单据
    search() {
      // 日期转换
      if (
        this.valueDate !== undefined &&
        this.valueDate !== null &&
        this.valueDate.length > 0
      ) {
        this.queryParams.startDate = this.parseTime(this.valueDate[0]);
        this.queryParams.endDate = this.setTime(this.valueDate[1]);
      }
      this.getProcessList();
    },

    // 查询所有
    checkleAll() {
      //清空搜索信息，避免干扰
      this.queryParams.code = "";
      this.queryParams.name = "";
      this.queryParams.startDate = "";
      this.queryParams.endDate = "";
      this.valueDate = [];
      this.getProcessList();
    },

    /** 弹框取消 */
    cancel() {
      this.open = false;
      this.reset();
    },
    close() {
      this.reset();
    },
    // 年月日
    inMaterTime(date) {
      let time = new Date(date);
      return (
        time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate()
      );
    },

    //时间+23时59分59秒
    setTime(date) {
      date.setHours(date.getHours() + 23);
      date.setMinutes(date.getMinutes() + 59);
      date.setSeconds(date.getSeconds() + 59);
      let time = new Date(date);
      return (
        time.getFullYear() +
        "-" +
        (time.getMonth() + 1) +
        "-" +
        time.getDate() +
        " " +
        time.getHours() +
        ":" +
        time.getMinutes() +
        ":" +
        time.getSeconds()
      );
    },
  },
};
</script>
<style lang="scss">
.Process-select {
  .ma-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .ma-right {
    .el-form-item {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    label {
      width: auto;
      flex-grow: 1;
    }

    .el-form-item__content {
      margin-left: 0px !important;
      margin-right: 0 !important;
    }
  }

  .el-dialog__body {
    height: calc(100vh - 250px);
  }
  .el-range-editor--medium.el-input__inner {
    line-height: 32px;
  }
  .el-range-editor--medium .el-range__icon,
  .el-range-editor--medium .el-range__close-icon,
  .el-range-editor--medium .el-range-separator {
    line-height: 24px;
  }
  .el-range-editor--medium.el-input__inner {
    height: 32px;
  }
  .custom-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .app-container {
    padding-top: 0;
  }

  .el-table {
    cursor: pointer;
  }

  .el-table__body {
    user-select: none;
  }

  .Operate-box {
    .el-tag.el-tag--info {
      color: #1890ff;
    }
    .el-switch {
      display: flex;
      justify-content: center;
    }
    .el-dialog__body {
      padding-right: 15px;
      padding-bottom: 20px;
    }

    .el-input.is-disabled .el-input__inner {
      color: #333;
    }

    .el-form-item--medium .el-form-item__content {
      margin-right: 10px !important;
    }
  }
}
</style>
